<template>
    <v-app id="user">
        <v-main class="align-center">
            <v-card class="mx-auto" max-width="344" outlined>
                <!-- 卡片内容 -->
                <v-card-text>
                    <v-container>
                        <!-- 表单输入框 -->
                        <v-text-field v-model="userInfo.username" label="用户名"
                            :rules="[(v) => !!v || '用户名不能为空']"></v-text-field>
                        <v-text-field v-model="userInfo.password" type="password" label="密码"
                            :rules="[(v) => !!v || '密码不能为空']"></v-text-field>
                    </v-container>
                </v-card-text>

                <!-- 弹框操作 -->
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" text @click="login">
                        登录
                    </v-btn>
                    <v-btn color="blue darken-1" text @click="register">
                        注册
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-main>

    </v-app>
</template>

<script>
export default {
    data: () => ({
        userInfo: {
            username: '',
            password: ''
        }
    }),
    methods: {
        // 登录
        login() {
            this.$api.user.login(this.userInfo).then((result) => {
                // 登录成功时
                if (result.data.code == 0) {
                    localStorage.setItem('token', result.data.data.token)
                    this.$router.push('/index/testcase')
                }
            }).catch((err) => {
                console.log('err', err)
            })
        },
        // 注册
        register() {
            this.$api.user.register(this.userInfo).then((result) => {
                // 注册成功时
                if (result.data.code == 0) {
                    this.login()
                }
            }).catch((err) => {
                console.log('err', err)
            })
        }
    }
}
</script>

<style  scoped>
#user {
    background-image: url('../assets/bg.png');
    background-size: cover;
    width: 100vw;
    height: 100vh;
}
</style>